<template>
<div class="container">
<div class="row">
  <ul class="list-group col-sm-3">
    <router-link :to="{path:'/comPage/base'}" class="list-group-item" active-class="act" tag="li">路由基本使用</router-link>
    <router-link :to="{path:'/comPage/son'}" class="list-group-item" active-class="act" tag="li">父组件传参子组件</router-link>
    <router-link :to="{path:'/comPage/toParent'}" class="list-group-item" active-class="act" tag="li">子组件传数据给父组件</router-link>
    <router-link :to="{path:'/comPage/is'}" class="list-group-item" active-class="act" tag="li">使用is动态切换组件</router-link>
    <router-link :to="{path:'/comPage/slot'}" class="list-group-item" active-class="act" tag="li">插槽功能</router-link>
    <router-link :to="{path:'/comPage/slotName'}" class="list-group-item" active-class="act" tag="li">具名(有名字)插槽功能</router-link>
    <router-link :to="{path:'/comPage/starPage'}" class="list-group-item" active-class="act" tag="li">star组件开发</router-link>
  </ul>
  <div class="col-sm-8">
    <transition name="right">
    <router-view></router-view>
  </transition>
  </div>
</div>
</div>
</template>
<script>
export default {

}
</script>
<style scoped>
.act{
  color: #fff;
  background: #333;
}
.right-enter-active,.left-leave-active{
    transition: 0.5s
}
.right-enter{
  transform: translate(300px,300px);
  opacity: 0.2
}
.right-leave{
  transform: translate(-300px,-300px);
}

</style>
